<template>
  <div>
    <banner-bottom>
      <!-- banner -->
      <cq-bannner></cq-bannner>
      <!-- banner结束 -->
      <!-- main-brand开始 -->
      <div class="brand flex column flex-center">
        <h2>
          <img
            src="@/assets/img/title-brand.png"
            width="391"
            height="86"
            alt="title-brand"
          />
        </h2>
        <div class="brand-sub">
          <ul class="flex flex-center">
            <li :key="item.id" v-for="item in score" class="marking w280h40">
              <div class="sub-mask flex column flex-center">
                <img
                  class="mb35"
                  src="@/assets/img/cyx.png"
                  width="90"
                  height="90"
                  alt="cyx"
                />
                <h3 class="mb15 fz28 colorfff">{{ item.methods }}</h3>
                <p class="fz16 colorfff">{{ item.desc }}</p>
                <!-- <a href="#">{{ item.more }}</a> -->
                <a href="#" class="cq-btn-more">了解更多</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- main-brand结束 -->
      <!-- main-energize开始 -->
      <div class="energize flex column flex-center">
        <h2>
          <img
            src="@/assets/img/title-energize.png"
            width="302"
            height="79"
            alt="title-brand"
          />
        </h2>
        <ul class="energize-btn flex flex-center">
          <li :key="idx" v-for="(item, idx) in industry">
            <a href="#">{{ item }}</a>
          </li>
        </ul>
        <!-- <ul>
      <li v-for="item in score" :key="item.methods"><img :src="item.imgurl" alt=""></li>  
    </ul> -->
        <ul class="energize-ser flex flex-center">
          <li
            :key="idx"
            v-for="(item, idx) in bank"
            class="energize-ser-first flex column flex-center"
          >
            <h3>
              <img
                src="@/assets/img/title-unicom.png"
                width="218"
                height="55"
                alt="title-unicom"
              />
            </h3>
            <p>{{ item }}</p>
          </li>
        </ul>
      </div>
      <!-- main-energize结束 -->
      <!-- banner-bottom开始 -->

      <template #sjk>
        <div class="banner-bottom flex column flex-center">
          <h3>依托橙券，聚焦权益，全面合作</h3>
          <div class="tel">
            <span>全国服务热线：400-096-0828</span>
            <span>商务合作专线：156-6806-1789</span>
          </div>

          <btn-more :className="btnBrand" @click="btnMore">了解更多</btn-more>
        </div>
      </template>
    </banner-bottom>
  </div>
</template>

<script>
import BannerBottom from "./components/BannerBottom.vue";
import CqBannner from "./components/cq-bannner";
import BtnMore from "./components/btn-more";
export default {
  name: "Homepage",
  components: {
    BtnMore,
    BannerBottom,
    CqBannner,
  },
  data() {
    return {
      btnBrand: "banner-bottom-btn",
      imgurl: require("@/assets/img/logo-tips.png"),
      aa: "",
      score: [
        {
          methods: "橙营销",
          desc: "营销助力品牌升级",
          imgurl: require("@/assets/img/logo-tips.png"),
        },
        {
          methods: "橙积分",
          desc: "让积分发挥更大价值",
          imgurl: require("@/assets/img/logo-tips.png"),
        },
        {
          methods: "橙福利",
          desc: "智慧金融解决方案服务商",
          imgurl: require("@/assets/img/logo-tips.png"),
        },
        {
          methods: "橙员工",
          desc: "开创员工福利新时代",
          imgurl: require("@/assets/img/logo-tips.png"),
        },
      ],
      industry: [
        "金融行业",
        "互联网行业",
        "保险行业",
        "汽车行业",
        "传媒行业",
        "通信行业",
      ],
      bank: [
        "作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。",
        "作为中国的卫生阻击哈哈的，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。",
        "作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。",
      ],
    };
  },

  mounted() {},

  methods: {
    btnMore() {
      this.$router.push("/about");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/main.css";
.cq-btn-more {
  box-sizing: border-box;
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: solid 1px #fff;
  border-radius: 20px;
  font-size: 16px;
  color: #fff;
}

.cq-btn-more:hover:after {
  transform: translateX(3px);
}
.cq-btn-more.btn-brand:after {
  color: #fff;
}

.cq-btn-more:hover {
  text-decoration: none;
}
.bgc-white {
  background-color: rgba(255, 255, 255, 0.2);
}

.cq-btn-more::after {
  display: inline-block;
  content: "\e601";
  font-family: "icomoon";
  // transition: 0.1s;
}

.banner-bottom-btn::after {
  display: inline-block;
  content: "\e601";
  font-family: "icomoon";
  // transition: 0.1s;
}

.banner-bottom-btn:hover::after {
  transform: translate(4px);
}

.banner-bottom-btn {
  display: inline-block;
  width: 150px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
}
</style>